<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>滤镜特效练习</title>
		<style>
			img:{
				width: 400px;
				height: auto;
				display: block;
				margin: 0 auto;
			}
			img:hover {
				-webkit-filter: none;
			}
			.img1 {
				
				/**
				 * 滤镜属性-灰度
				 * grayscale:设置灰度1-100%，0-0%
				 *transition 渐变过度时间
				 */
				-webkit-filter: grayscale(1);
				transition: all 3s
			}
			.img2 {
				/**
				 * 滤镜属性-亮度
				 * brightness:设置亮度，默认1，正常亮度，0-黑板，曝光1.5
				 */
				-webkit-filter: brightness(2);
			}
			.img3 {
				/**
				 * 褐色属性-老年
				 *  sepia;1-100%,0-这鞥从
				 */
				-webkit-filter: sepia(1)
			}
			.img4 {
				/**
				 * 模糊度
				 *  blur单位像素
				 */
				-webkit-filter: blur(10px)
			}
			.img5 {
				 
				/**
				 * 对比度
				 *  contrast,1正常，0-灰色
				 */
				-webkit-filter: contrast(2)
				 
			}
			.img6 {
				/**
				 * 饱和度
				 *  contrast,1正常，0-灰色,2-比较正常
				 */
				-webkit-filter: saturate(2)
			}
			.img7 {
				/**
				 * 胶片底色效果
				 *  
				 */
				-webkit-filter: invert(1)
			}
			.img8 {
				/**
				 * 色相旋转
				 * 可以变成绿巨人
				 */
				-webkit-filter: hue-rotate(400deg)
			}
			.img9 {
				-webkit-filter: brightness(20) grayscale(1);
				transition: all 5s;
			}
			.img9:hover {
				-webkit-filter: brightness(1) grayscale(1);
			}
		</style>
	</head>
	<body>
		<img  class='img1' src="./img/kobe.jpg" alt="灰度">
		<img  class='img2' src="./img/kobe.jpg" alt="亮度">
		<img  class='img3' src="./img/kobe.jpg" alt="褐色属性">
		<img  class='img4' src="./img/kobe.jpg" alt="模糊度">
		<img  class='img5' src="./img/kobe.jpg" alt="对比度">
		<img  class='img6' src="./img/kobe.jpg" alt="饱和度">
		<img  class='img7' src="./img/kobe.jpg" alt="胶片底色效果">
		<img  class='img8' src="./img/kobe.jpg" alt="色相旋转">
		<img  class='img9' src="./img/kobe.jpg" alt="一点一点被画出来的感觉-素描">
	</body>
</html>
